<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartLine',
  props: {
    value: Object,
    text: String,
    subtext: String
  },
  mounted() {
    this.$nextTick(() => {
      //   let xAxisData = Object.keys(this.value)
      //   let seriesData = Object.values(this.value)
      let option = {
        title: {
          text: '曲线图标题'
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false }, //去除网格线x
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            lineStyle: {
              color: '#5e72ac',
              width: 3 //这里是为了突出显示加上的
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { show: false }, //去除网格线
          axisLine: {
            lineStyle: {
              color: '#5e72ac',
              width: 3 //这里是为了突出显示加上的
            }
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }
        ]
      }
      let dom = echarts.init(this.$refs.dom, 'tdTheme')
      dom.setOption(option)
    })
  }
}
</script>

<style lang="less">
.charts {
  //
}
</style>
